<template>
    <div>
        <el-card>
            <h3 class="title">详细信息
            <el-button size="small" style="float: right;" type="success" icon="el-icon-download" @click="exportList">导出</el-button>
            <el-button size="small" style="float: right; margin-right:10px" type="info" icon="el-icon-back" @click="goBack">返回</el-button>
            </h3>
            <el-form label-width="140px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="清单名称：">
                            {{ detailData.itemName|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="开始日期：">
                            {{ detailData.settStart|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="截止日期：">
                            {{ detailData.settEnd|| '-'}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="结算总额：">
                            {{ detailData.settAmount|| '-'}} 元
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="费用总额：">
                            {{ detailData.itemAmount|| '-'}} 元
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="创建人">
                            {{ detailData.appName|| '-'}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="创建时间：">
                            {{ detailData.appTime|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态：">
                            {{ detailData.itemStatus == '1' ? '已结算' :'结算中'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备注：">
                            {{ detailData.remark|| '-'}}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row class="order_list_title">
                    <el-col :span="2">
                         <h3>订单列表</h3>
                    </el-col>
                    <!-- <el-col :span="4">
                        <span>结算总额:</span> {{'-'}}
                    </el-col> -->
                    <el-col :span="10">
                        <span>合作单位:</span>
                        <my-select :data="partnerNamelist" :props="{label:'value',value:'value'}" v-model="pgData.partnerName" placeholder="请选择合作单位"></my-select>
                    </el-col>
            </el-row>

            <common-table :tablList="tableData" :settItem="detailData">   </common-table>
        </el-card>

    </div>
</template>

<script>
import commonTable from '../../components/common_table'
export default {
    components: {commonTable },
    props: {},
    data(){
        return{
            detailData:{},
            tableData:[],
            partnerNamelist:[],
            pgData:{
                partnerName:'',
            }
        }
    },
    computed: {
        rowguid:function(){
            return this.getQuery('rowguid')
        }  
    },
    watch:{
        'pgData.partnerName':function(n,o){
            if(n != o){
                this.getDetail(n);
            }
        }
    },
    methods: {
        getDetail:function(val){
            this.$get(this.$store.getters.settUrl + '/settItem/'+this.rowguid, {
                partnerName:val
            }, function(data) {
                this.detailData = data.settItem;
                this.tableData = data.guaOrderList;
            })
        },
        //获取合作单位列表
        getPartnerName:function(){
            this.$get(`${this.getGetters('partnerUrl')}/partner/listSelect`,{},function(data){
                this.partnerNamelist = data;
            })
        },
        //导出
        exportList:function(){
            if(this.tableData.length !=0){
                var search = toSearch({
                    partnerName:this.pgData.partnerName,
                    isExport: true,
                    token:this.getQuery('token') ? this.getQuery('token') : this.getGetters('user').token
                });
                window.open('/bhtong/settmg/settItem/' + this.rowguid + search);
            }else{
                ShowMsg('当前清单暂无数据，暂不支持导出', 'warning');
            }
        },
        //返回
        goBack:function(){
            this.$router.go(-1);
        }
    },
    mounted:function(){
        this.getDetail();   
        this.getPartnerName();
    }
}
</script>

<style scoped lang="scss">
    .title{
        padding-bottom: 10px;
        border-bottom: 1px solid #e8e8e8
    }
    .order_list_title{
        line-height: 40px;
        span{
            padding-right: 10px;

        }
    }
    ::v-deep .el-table th > .cell {
    text-align: center;
    }
    // ::v-deep .el-table .cell {
    //     text-align: center;
    // }
</style>

